<template>
  <div class="keyinfo">
    <MyHeader />
    <Form class="keyinfo_form" label-position="left"  ref="formItem" :model="formItem">
      <FormItem label="姓名" :label-width="120" prop='name' :rules="validator.chinese" >
        <Input v-model="formItem.name" type="text" placeholder="请输入姓名" :maxlength="15"></Input>
      </FormItem>
      <FormItem label="身份证号码" :label-width="120" prop='cerno' :rules="validator.cerno" >
        <Input v-model="formItem.cerno" type="text" :maxlength="18" placeholder="请输入身份证号码" @on-blur="changeId"></Input>
      </FormItem>
      <FormItem label="出生日期" :label-width="120" :rules="validator.must" >
        <Input v-model="formItem.natdate" disabled type="text" placeholder="出生日期"></Input>
      </FormItem>
      <FormItem label="性别" :label-width="120" prop='sex' :rules="validator.must" >
        <RadioGroup v-model="formItem.sex" style="float:right">
          <Radio label="1"><span>男</span></Radio>
          <Radio label="2"><span>女</span></Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="民族" class="keyinfo_select"  prop='nation' :label-width="120" :rules="validator.must" >
        <div  id="trigger4" v-if="!formItem.nation">选择民族</div>
        <div id="trigger4" v-if="formItem.nation">{{formItem.nation | dict('CB32')}}</div>
      </FormItem>
      <FormItem label="政治面貌" class="keyinfo_select" prop='polstand' :label-width="120" :rules="validator.must">
        <div id="trigger5" v-if="!formItem.polstand">选择政治面貌</div>
        <div id="trigger5" v-if="formItem.polstand">{{formItem.polstand | dict('CB30')}}</div>
      </FormItem>
      <FormItem label="文化程度" class="keyinfo_select" prop='education' :label-width="120" :rules="validator.must">
        <div id="trigger6" v-if="!formItem.education">选择文化程度</div>
        <div id="trigger6" v-if="formItem.education">{{formItem.litedeg | dict('CB31')}}</div>
      </FormItem>
       <FormItem class="dom" :label-width="120" label="户籍地址" prop='domother' :rules="validator.address" >
        <div class="selectDiv" id="trigger3" v-if="!formItem.domprov">省/市/县</div>
        <div class="selectDiv" id="trigger3" v-if="formItem.domprov">{{dom0}}</div>
        <Input v-model="formItem.domother" type="text" placeholder="街道/小区/室" :maxlength="30"></Input>
      </FormItem>
      <FormItem label="手机号码" :label-width="120" prop='mobtel' :rules="validator.telphone" >
        <Input v-model="formItem.mobtel" type="text" placeholder="手机号码"></Input>
      </FormItem>
      <div class="keyinfo_space"></div>
      <FormItem v-if="key=='1'" label="职务" :label-width="100" class="keyinfo_select" prop='position' :rules="validator.must">
        <Select v-if="formItem1.isboard === '2'" v-model="formItem.position" placeholder="职务">
          <Option value="432K">执行董事</Option>
        </Select>
        <Select v-if="formItem1.isboard === '1'" v-model="formItem.position" placeholder="职务">
          <Option value="431A">董事长</Option>
          <Option value="431B">副董事长</Option>
          <Option value="432A">董事</Option>
          <Option value="432L">独立董事</Option>
        </Select>
      </FormItem>
      <FormItem v-if="key=='2'" label="职务" :label-width="100" class="keyinfo_select" prop='position' :rules="validator.must">
        <Select v-model="jlPosition" placeholder="职务">
          <Option value="436A">经理</Option>
        </Select>
      </FormItem>
       <FormItem v-if="key=='3'" label="职务" :label-width="100" class="keyinfo_select" prop='position' :rules="validator.must">
        <Select v-if="formItem1.issuped === '2'" v-model="formItem.position" placeholder="职务">
          <Option value="408A">监事</Option>
        </Select>
        <Select v-if="formItem1.issuped ==='1'" v-model="formItem.position" placeholder="职务" :rules="validator.must">
          <Option value="408A">监事</Option>
          <Option value="408B">监事主席</Option>
        </Select>
      </FormItem>
      <FormItem class="keyinfo_select" label="任职期限" :label-width="100" prop='offyear' :rules="validator.must">
        <Select v-model="formItem.offyear" placeholder="任职期限">
          <Option value="1">1年</Option>
          <Option value="2">2年</Option>
          <Option value="3">3年</Option>
        </Select>
      </FormItem>
      <FormItem class="keyinfo_select" label="产生方式" :label-width="100" prop='posbrform' :rules="validator.must">
        <Select v-if="key=='1'||key=='3'" v-model="formItem.posbrform" placeholder="产生方式">
          <Option value="01">委派（适用于国有独资）</Option>
          <Option value="02">选举（适用于普通有限公司）</Option>
        </Select>
        <Select v-if="key=='2'" v-model="formItem.posbrform" placeholder="产生方式">
          <Option value="01">聘任</Option>
        </Select>
      </FormItem>
      <!--<FormItem v-if="key == '1'" class="keyinfo_select" label="兼任经理" :label-width="100" prop='ismanager'>-->
        <!--<Select v-if="isjl=='false' || formItem.ismanager == '1'" v-model="formItem.ismanager" placeholder="兼任经理">-->
          <!--<Option value="1">是</Option>-->
          <!--<Option value="0">否</Option>-->
        <!--</Select>-->
        <!--<span v-if="isjl=='true' && formItem.ismanager != '1'" style="line-height:1.75rem">否</span>-->
      <!--</FormItem>-->
    </Form>
    <div class="keyinfo_bottom">
      <div class="bottom">
        <Button type="warning" @click="updateMem('formItem')">保存</Button>
        <Button type="primary" @click="retur">返回</Button>
      </div>
      <MyFooter />
    </div>
  </div>
</template>

<script>
  import MyHeader from '../../../components/MyHeader.vue'
  import MyFooter from '../../../components/MyFooter.vue'
  import request from '../../../utils/request'
  import dictutil from '../../../assets/js/dictutil'
  import validator from '../../../utils/validatorUtil.js'
  import MobileSelect from 'mobile-select'
  export default {
    data() {
      return {
        validator,
        key: '',
        isjl: '',
        jlPosition: '436A',
        formItem1: {},
        edus: [],
        citys: [],
        nations: [],
        polstands: [],
        dom0: '',
        formItem: {
          certype: 10,
          gid: '',
          pripid: '',
          name: '',
          cerno: '',
          sex: '',
          mobtel: '',
          natdate: '',
          nation: '',
          polstand: '',
          dom: '',
          litedeg: '',
          position: '',
          offyear: '',
          posbrform: '',
          ismanager: ''
        }
      }
    },
    methods: {
      memDetail() {
        request.get('/interface/apply/cp/setup/memDetail.do', {personid: this.$route.query.personid}
        ).then(response => {
          if (response.data.result === 'success') {
            this.formItem = response.data.data
            this.dom0 = this.formItem.dom.substring(0, this.formItem.dom.length - this.formItem.domother.length)
            this.formItem.offyear = this.formItem.offyear.toString()
            if (this.formItem.natdate && !(this.formItem.natdate instanceof String)) {
              let date = new Date(this.formItem.natdate)
              let Y = date.getFullYear() + '-'
              let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
              let D = (date.getDate() + 1 < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1)
              this.formItem.natdate = Y + M + D
            }
          }
          if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
            return null
          }
        })
      },
      postUpdateMemApi() {
        this.formItem.dom = this.dom0 + this.formItem.domother
        this.formItem.gid = sessionStorage.getItem('gid')
        this.formItem.pripid = sessionStorage.getItem('pripid')
        let postData = new FormData()
        postData.append('memForm', JSON.stringify(this.formItem))
        postData.append('isManager', this.formItem.ismanager)
        request.post('/interface/apply/cp/setup/updateMem.do', postData
        ).then(response => {
          if (response.data.result === 'success') {
            this.$router.push({ name: 'CompanyMemList' })
          } else if (response.data.result === 'error') {
            this.$ErrorAlert(response.data.message)
          }
        })
      },
      updateMem(name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            if (this.isjl === 'true') {
              this.$Modal.confirm({
                content: '<p>是否兼任经理</p>',
                okText: '是',
                cancelText: '否',
                onOk: () => {
                  this.formItem.ismanager = '1'
                  this.postUpdateMemApi()
                }
              })
            } else {
              this.postUpdateMemApi()
            }
          }
        })
      },
      getprolocother() {
        this.citys = dictutil.getList('city')
        this.edus = dictutil.getList('CB31')
        this.nations = dictutil.getList('CB32')
        this.polstands = dictutil.getList('CB30')
      },
    domSelectInit() {
      let that = this
      let mobileSelect3 = new MobileSelect({
                trigger: '#trigger3',
                title: '单项选择',
                wheels: [
                    {data: that.citys}
                ],
                keyMap: {
                          id: 'value',
                          value: 'text',
                          childs: 'child'
                      },
                callback: function(indexArr, data) {
                  that.formItem.domprov = data[0].value
                  that.formItem.domcity = data[1].value
                  that.formItem.domcounty = data[2].value
                  if (data[0].text === data[1].text) {
                    that.dom0 = data[0].text + data[2].text
                  } else {
                    that.dom0 = data[0].text + data[1].text + data[2].text
                  }
                }
            })
      return mobileSelect3
    },
    nationSelectInit() {
      let that = this
      let mobileSelect4 = new MobileSelect({
                trigger: '#trigger4',
                title: '单项选择',
                wheels: [
                    {data: that.nations}
                ],
                keyMap: {
                          id: 'value',
                          value: 'text'
                      },
                callback: function(indexArr, data) {
                    that.formItem.nation = data[0].value
                }
            })
      return mobileSelect4
    },
    polstandSelectInit() {
      let that = this
      let mobileSelect5 = new MobileSelect({
                trigger: '#trigger5',
                title: '单项选择',
                wheels: [
                    {data: that.polstands}
                ],
                keyMap: {
                          id: 'value',
                          value: 'text'
                      },
                callback: function(indexArr, data) {
                    that.formItem.polstand = data[0].value
                }
            })
      return mobileSelect5
    },
    educationSelectInit() {
      let that = this
      let mobileSelect6 = new MobileSelect({
                trigger: '#trigger6',
                title: '单项选择',
                wheels: [
                    {data: that.edus}
                ],
                keyMap: {
                          id: 'value',
                          value: 'text'
                      },
                callback: function(indexArr, data) {
                    that.formItem.education = data[0].value
                }
            })
      return mobileSelect6
    },
    changeId() {
      let val = this.formItem.cerno
      if (val.length === 18) {
        var birthday = ''
        if (val != null && val !== '') {
          if (val.length === 15) {
            birthday = '19' + val.substr(6, 6)
          } else if (val.length === 18) {
            birthday = val.substr(6, 8)
          }

          birthday = birthday.replace(/(.{4})(.{2})/, '$1-$2-')
        }
        this.formItem.natdate = birthday
      } else {
        this.formItem.natdate = ''
      }
    },
    retur() {
      this.$router.push({name: 'CompanyMemList'})
    }
    },
    mounted() {
      this.key = this.$route.query.key
      this.formItem1 = JSON.parse(sessionStorage.getItem('formItem'))
      this.isjl = this.$route.query.isjl
      this.getprolocother()
      this.memDetail()
      this.nationSelectInit()
      this.polstandSelectInit()
      this.educationSelectInit()
      this.domSelectInit()
    },
    components: {
      MyHeader,
      MyFooter
    }
  }

</script>

<style lang="scss">
  .keyinfo {
    position: relative;
    min-height: 100%;
    padding-bottom: 4rem;
    background: #f3f3f3;
    &_space {
      height: 0.54rem;
      background: #f3f3f3;
    }
    &_form {
      background: #fff;
      .dom{
        height: 3.5rem;
        label {
          height: 3.5rem;
          font-size: 0.57rem;
          line-height: 3.5rem !important;
          padding: 0 0 0 0.54rem;
        }
        #trigger3{
          height: 1.75rem;
          font-size: 0.57rem;
          line-height: 1.75rem;
          text-align: right;
        }
      }
      .ivu-form-item {
        margin-bottom: 0;
        border-bottom: 1px solid #dedede;
        .selectDiv {
          border: 1px solid #dddee1;
        }
        label {
          height: 1.75rem;
          font-size: 0.57rem;
          line-height: 1.75rem;
          padding: 0 0 0 0.54rem;
        }
        input {
          height: 1.75rem;
          font-size: 0.57rem;
          border-top: none;
          border-bottom: none;
          border-right: none;
          border-radius: 0;
          text-align: right;
          &:hover {
            border: none;
          }
          &:focus {
            border: none;
            box-shadow: none;
          }
          &::-webkit-input-placeholder {
            text-align: right;
          }
          &::-moz-placeholder {
            text-align: right;
          }
          &:-ms-input-placeholder {
            text-align: right;
          }
        }
      }
    }
    &_select {
      text-align: right;
    .ivu-form-item-content {
      padding-left: 0.54rem;
      height: 1.75rem;
      line-height: 1.75rem;
      font-size: 0.57rem;
      .ivu-select-selection {
        border: none;
        box-shadow: none;
        height: 100%;
        .ivu-select-selected-value {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.57rem;
          padding-left: 0;
        }
        .ivu-select-placeholder {
          height: 1.75rem;
          line-height: 1.75rem;
          font-size: 0.57rem;
          padding-left: 0;
        }
      }
    }
  }
    &_bottom {
      // padding: 0.72rem;
      position: absolute;
      height: 3.5rem;
      bottom: 0;
      width: 100%;
      button {
        display: block;
        margin: 0 auto;
        font-size: 0.57rem;
      }
    }
  }
.bottom {
    display: flex;
    justify-content: space-around;
    // padding: 0.54rem;
    button {
      width: 45%;
      padding-top: 0.36rem;
      padding-bottom: 0.36rem;
      font-size: 0.57rem;
    }
  }
</style>
